import Image from "next/image";
import CTAButton from "./CTAButton";
import { type Hero as HeroType } from "@/base-framework/types/landing";

export default function Hero({ data }: { data: HeroType }) {
  return (
    <section id="hero" className="w-full">
      <div className="mx-auto max-w-screen-xl px-6 py-16 grid gap-10 md:grid-cols-2 items-center">
        <div>
          <h1 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">
            {data.title}
          </h1>
          {data.subtitle && (
            <p className="text-lg text-foreground/80 mb-4">{data.subtitle}</p>
          )}
          {data.description && (
            <p className="text-base text-foreground/70 mb-6">{data.description}</p>
          )}
          {data.ctas && data.ctas.length > 0 && (
            <div className="flex gap-3 flex-wrap" role="group" aria-label="主要行动">
              {data.ctas.map((c, i) => (
                <CTAButton key={i} cta={c} />
              ))}
            </div>
          )}
        </div>
        <div className="flex justify-center md:justify-end">
          {data.media && data.media.type === "image" && (
            <div className="relative w-full h-auto" style={{ maxWidth: data.media.width ?? 520, aspectRatio: "auto" }}>
              <Image
                src={data.media.src}
                alt={data.media.alt ?? ""}
                width={data.media.width ?? 520}
                height={data.media.height ?? 360}
                priority
                className="w-full h-auto"
                style={{ width: "100%", height: "auto" }}
              />
            </div>
          )}
          {data.media && data.media.type === "video" && (
            <video
              aria-label={data.media.alt ?? "演示视频"}
              className="rounded-lg shadow border border-black/10 dark:border-white/15"
              autoPlay
              muted
              loop
              playsInline
            >
              <source src={data.media.src} />
              您的浏览器不支持视频标签。
            </video>
          )}
        </div>
      </div>
    </section>
  );
}
